import React, { useState, useEffect } from 'react'
import style from './index.module.scss'
import ImgLoading from '@/components/ImgLoading/index' 
import LottieTest from '@/components/LottieTest/index' 
import EedEnvelopeRain from '@/components/EedEnvelopeRain/index' 


export default function ({list=[]}) {
    const [lazylist, setLazyList]= useState([])
    
    useEffect(()=>{
        if(list.length){
            setLazyList([list[0]])
        }
    },[])
    
    const goPage= (url)=>{
        return window.open(url)
    }
    
    const loadMore= ()=>{
        var len= lazylist.length
        var addVal= list[len]
        if(!addVal) return
        setLazyList((v)=>[...v,addVal])
    }
    return (
        <div className={style.box}>
            { 
                lazylist.map((v,i)=>
                <div className={style.item} onClick={()=>goPage(v.path)} key={v.path+i}>
                    <ImgLoading url={v.img} onLoad={loadMore} />
                    <div>
                    <p className={style.text}>{v.title}</p>
                    </div>
                </div>
                )
            }
            {LottieTest({showBtn: true,btnText: "显示测试动画"})}
            {EedEnvelopeRain({showBtn: true,btnText: "显示测试红包"})}
        </div>
    )
}